/// <reference path="references.scss" />

//
// Badge common
// -----------------------------------------------------

.badge {
    --badge-ring-opacity: 0;
    --badge-ring-color-rgb: 255,255,255;
    --badge-height: calc((var(--badge-line-height) * 1em) + calc(var(--badge-padding-y) * 2));

    box-shadow: inset rgba(var(--badge-ring-color-rgb), var(--badge-ring-opacity)) 0px 0px 0px 1px;

    &.active {
        background-color: var(--badge-hover-bg, var(--badge-bg));
    }
}

//
// Badge icons
// -----------------------------------------------------

.badge > i {
    position: relative;
    top: 1px;
    opacity: 0.6;
    line-height: inherit;
}


//
// Badge closer
// -----------------------------------------------------

.badge > .close,
.badge > .btn-close {
    position: relative;
    box-sizing: border-box;
    transform: scale(0.85);
}

.badge:not(.badge-subtle, .badge-outline, .badge-light) > .btn-close {
    @extend .btn-close-white;
}

//
// Subtle & Outline badge variants
// -----------------------------------------------------

.badge-subtle {
    --badge-bg-opacity: 0.7;
    --badge-hover-bg-opacity: 1;
}

.badge-outline {
    --badge-bg-opacity: 0;
    --badge-hover-bg-opacity: 1;
    --badge-ring-opacity: 0.5;
    --badge-ring-color-rgb: var(--badge-base-rgb);
}

@each $color, $value in $theme-colors {
    .badge-subtle.badge-#{$color},
    .badge-outline.badge-#{$color} {
        --badge-bg: var(--#{$color}-bg-subtle);
        --badge-bg-rgb: var(--#{$color}-bg-subtle-rgb);
        --badge-color: var(--#{$color}-text-emphasis);
    }

    .badge-subtle.badge-#{$color} {
        --badge-hover-bg: var(--badge-bg);
        --badge-hover-bg-rgb: var(--badge-bg-rgb);
    }

    .badge-outline.badge-#{$color} {
        --badge-hover-color: #{color-yiq($value)};
    }
}


//
// Badge with subtle ring shadow
// -----------------------------------------------------

.badge-ring {
    --badge-ring-opacity: 0.1;
    --badge-ring-color-rgb: #{to-rgb($gray-700)};
}


//
// Counter badge
// -----------------------------------------------------

.badge-counter {
    --badge-padding-x: 0.125rem !important;
    --badge-padding-y: 0.125rem !important;
    --badge-font-size: 0.6875rem;
    font-size: var(--badge-font-size);
    line-height: var(--badge-line-height);
    min-width: var(--badge-height);

    &.badge-pill {
        --badge-padding-x: 0.25rem !important;
    }

    &.badge-counter-ring {
        outline: 2px solid #fff;
        outline-offset: -1px;
    }
}


//
// Slightly larger Badge/Label
// -----------------------------------------------------

.badge-lg {
    --badge-padding-x: #{$input-btn-padding-x};
    --badge-padding-y: #{$input-btn-padding-y};
    --badge-font-size: inherit;
    --badge-border-radius: var(--border-radius-md);

    &.badge-pill {
        --badge-padding-x: 1em !important;
    }
}


//
// Edge positioning (generic)
// -----------------------------------------------------

.edge-top-start,
.edge-top-end,
.edge-bottom-start,
.edge-bottom-end {
    position: absolute;
    transform: translate(-50%, -50%);
}

.edge-top-start,
.edge-top-end {
    inset-block-start: 0;
}

.edge-bottom-start,
.edge-bottom-end {
    inset-block-start: 100%;
}

.edge-top-start,
.edge-bottom-start {
    inset-inline-start: 0;
}

.edge-top-end,
.edge-bottom-end {
    inset-inline-start: 100%;
}

.edge-inset {
    --edge-offset-x: 2px;
    --edge-offset-y: 2px;

    &.edge-top-start {
        transform: translate(var(--edge-offset-x), var(--edge-offset-y));
    }

    &.edge-bottom-start {
        transform: translate(var(--edge-offset-x), calc(-100% - 2px));
    }

    &.edge-top-end {
        transform: translate(calc(-100% - var(--edge-offset-x)), var(--edge-offset-y));
    }

    &.edge-bottom-end {
        transform: translate(calc(-100% - var(--edge-offset-x)), calc(-100% - var(--edge-offset-y)));
    }
}